<template>
  <page-container>
    <a-row :gutter="16">
      <a-col :span="12">
        <a-card :bordered="false">
          <div style="text-align:center">
            <a-statistic
              title="门店保证金"
              :precision="2"
              prefix="¥"
              :value="security.store"
              :value-style="{ color: '#3f8600' }"
            />
          </div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card :bordered="false">
          <div style="text-align:center">
            <a-statistic
              title="服务商保证金"
              :precision="2"
              prefix="¥"
              :value="security.provider"
              :value-style="{ color: '#cf1322' }"
            />
          </div>
        </a-card>
      </a-col>
    </a-row>
    <a-card
      :bordered="false"
      v-for="item in dataSource"
      :key="item.id"
      @click="handleDetail(item.from_type)"
      class="from-item"
    >
      <a-row>
        <a-col :span="6" style="text-align:center">
          <a-statistic title="模块" :value="item.from_type | formTypeFilter" />
        </a-col>
        <a-col :span="6" style="text-align:center">
          <a-statistic title="钱包总金额" :value="item.all_money" />
        </a-col>
        <a-col :span="6" style="text-align:center">
          <a-statistic title="已取款金额" :value="item.take_money" />
        </a-col>
        <a-col :span="6" style="text-align:center">
          <a-statistic title="可取款金额" :value="item.usable_money" />
        </a-col>
      </a-row>
    </a-card>
    <!-- <a-card :bordered="false" style="margin-top:24px">
      <div class="table-page-search-wrapper" >
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="4" :sm="24">
              <a-form-item>
                <a-input placeholder="请输入名称/电话" v-model="queryParam.search" />
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="querySearch(true)" icon="search">查询</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <a-table
        ref="table"
        size="default"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="{ 'show-total': total => `共 ${total} 条` }"
      >
        <span slot="actions" slot-scope="text, record">
          <template>
            <a @click="handleDetail(record.from_type)">详情</a>
          </template>
        </span>
      </a-table>
    </a-card> -->
  </page-container>
</template>

<script>
import { platformWalletList } from '@/api/stat'
import formTableMixin from '@/mixins/formTableMixin'

const columns = [
  {
    title: '来源',
    dataIndex: 'from_type',
    customRender (text) {
      return FORM_TYPE_MAP[text]
    }
  },
  {
    title: '钱包总金额',
    dataIndex: 'all_money',
    customRender (text) {
      return '￥' + text
    }
  },
  {
    title: '已取款金额',
    dataIndex: 'take_money',
    customRender (text) {
      return '￥' + text
    }
  },
  {
    title: '可取款金额',
    dataIndex: 'usable_money',
    customRender (text) {
      return '￥' + text
    }
  },
  {
    title: '操作',
    dataIndex: 'actions',
    width: '150px',
    scopedSlots: { customRender: 'actions' }
  }
]

const FORM_TYPE_MAP = {
  clothes: '洗衣',
  appliance: '家电',
  house: '家政',
  goods: '商城',
  vip: '会员'
}

export default {
  name: 'PlatformWalletList',
  mixins: [formTableMixin],
  data () {
    this.columns = columns
    return {
      queryParam: {},
      dataSource: [],
      security: {}
    }
  },
  created () {
    this.getPlatformWalletList()
  },
  filters: {
    formTypeFilter (type) {
      return FORM_TYPE_MAP[type]
    }
  },
  methods: {
    handleDetail (formType) {
      this.$router.push({
        name: 'storeWalletDetail',
        query: {
          form_type: formType,
          walletType: 'platform'
        }
      })
    },
    getPlatformWalletList () {
      const params = this.queryParam
      platformWalletList(params).then(res => {
        this.dataSource = res.data.wallet
        this.security = res.data.security
      })
    }
  }
}
</script>

<style lang="less" scoped>
.from-item {
  margin-top: 24px;
  cursor: pointer;
}
</style>
